<template>
  <div class="home-container">
    <header class="app-header">
      <h1 class="app-title">在线棋类游戏平台</h1>
    </header>
    
    <main class="app-content">
      <div class="game-selection">
        <h2 class="selection-title">请选择游戏</h2>
        
        <div class="game-cards">
          <div class="game-card" @click="enterWuziqi">
            <div class="game-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                <!-- 棋盘背景 -->
                <rect x="10" y="10" width="180" height="180" fill="#e7c384" stroke="#333" stroke-width="2"/>
                
                <!-- 棋盘线条 -->
                <g stroke="#333" stroke-width="1">
                  <!-- 横线 -->
                  <line x1="20" y1="30" x2="180" y2="30" />
                  <line x1="20" y1="50" x2="180" y2="50" />
                  <line x1="20" y1="70" x2="180" y2="70" />
                  <line x1="20" y1="90" x2="180" y2="90" />
                  <line x1="20" y1="110" x2="180" y2="110" />
                  <line x1="20" y1="130" x2="180" y2="130" />
                  <line x1="20" y1="150" x2="180" y2="150" />
                  <line x1="20" y1="170" x2="180" y2="170" />
                  
                  <!-- 竖线 -->
                  <line x1="30" y1="20" x2="30" y2="180" />
                  <line x1="50" y1="20" x2="50" y2="180" />
                  <line x1="70" y1="20" x2="70" y2="180" />
                  <line x1="90" y1="20" x2="90" y2="180" />
                  <line x1="110" y1="20" x2="110" y2="180" />
                  <line x1="130" y1="20" x2="130" y2="180" />
                  <line x1="150" y1="20" x2="150" y2="180" />
                  <line x1="170" y1="20" x2="170" y2="180" />
                </g>
                
                <!-- 棋子 -->
                <circle cx="70" cy="70" r="12" fill="black" />
                <circle cx="110" cy="70" r="12" fill="black" />
                <circle cx="150" cy="110" r="12" fill="black" />
                <circle cx="70" cy="110" r="12" fill="white" stroke="#333" stroke-width="1" />
                <circle cx="110" cy="110" r="12" fill="white" stroke="#333" stroke-width="1" />
                <circle cx="110" cy="150" r="12" fill="white" stroke="#333" stroke-width="1" />
                <circle cx="150" cy="70" r="12" fill="black" />
              </svg>
            </div>
            <div class="game-info">
              <h3 class="game-name">五子棋</h3>
              <p class="game-desc">经典的黑白棋对战游戏，五子连珠者胜</p>
            </div>
          </div>
          
          <div class="game-card" @click="enterChess">
            <div class="game-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
                <!-- 棋盘背景 -->
                <rect x="10" y="10" width="180" height="180" fill="#e7c384" stroke="#333" stroke-width="2"/>
                
                <!-- 楚河汉界 -->
                <rect x="10" y="90" width="180" height="20" fill="#d4a76a" stroke="#333" stroke-width="1"/>
                <text x="60" y="105" font-family="SimHei, Microsoft YaHei" font-size="14" fill="#8B4513">楚河汉界</text>
                
                <!-- 棋盘线条 -->
                <g stroke="#333" stroke-width="1">
                  <!-- 横线 -->
                  <line x1="30" y1="30" x2="170" y2="30" />
                  <line x1="30" y1="50" x2="170" y2="50" />
                  <line x1="30" y1="70" x2="170" y2="70" />
                  <line x1="30" y1="90" x2="170" y2="90" />
                  <line x1="30" y1="110" x2="170" y2="110" />
                  <line x1="30" y1="130" x2="170" y2="130" />
                  <line x1="30" y1="150" x2="170" y2="150" />
                  <line x1="30" y1="170" x2="170" y2="170" />
                  
                  <!-- 竖线 -->
                  <line x1="30" y1="30" x2="30" y2="170" />
                  <line x1="50" y1="30" x2="50" y2="170" />
                  <line x1="70" y1="30" x2="70" y2="170" />
                  <line x1="90" y1="30" x2="90" y2="170" />
                  <line x1="110" y1="30" x2="110" y2="170" />
                  <line x1="130" y1="30" x2="130" y2="170" />
                  <line x1="150" y1="30" x2="150" y2="170" />
                  <line x1="170" y1="30" x2="170" y2="170" />
                </g>
                
                <!-- 九宫格 -->
                <line x1="70" y1="30" x2="130" y2="90" stroke="#333" stroke-width="1" />
                <line x1="130" y1="30" x2="70" y2="90" stroke="#333" stroke-width="1" />
                <line x1="70" y1="110" x2="130" y2="170" stroke="#333" stroke-width="1" />
                <line x1="130" y1="110" x2="70" y2="170" stroke="#333" stroke-width="1" />
                
                <!-- 棋子 -->
                <!-- 红方 -->
                <circle cx="90" cy="150" r="15" fill="#f0f0f0" stroke="#c00" stroke-width="2"/>
                <text x="90" y="155" font-family="SimHei, Microsoft YaHei" font-size="16" fill="#c00" text-anchor="middle">帅</text>
                
                <circle cx="50" cy="150" r="15" fill="#f0f0f0" stroke="#c00" stroke-width="2"/>
                <text x="50" y="155" font-family="SimHei, Microsoft YaHei" font-size="16" fill="#c00" text-anchor="middle">车</text>
                
                <circle cx="70" cy="130" r="15" fill="#f0f0f0" stroke="#c00" stroke-width="2"/>
                <text x="70" y="135" font-family="SimHei, Microsoft YaHei" font-size="16" fill="#c00" text-anchor="middle">炮</text>
                
                <!-- 黑方 -->
                <circle cx="90" cy="50" r="15" fill="#f0f0f0" stroke="#000" stroke-width="2"/>
                <text x="90" y="55" font-family="SimHei, Microsoft YaHei" font-size="16" fill="#000" text-anchor="middle">将</text>
                
                <circle cx="130" cy="50" r="15" fill="#f0f0f0" stroke="#000" stroke-width="2"/>
                <text x="130" y="55" font-family="SimHei, Microsoft YaHei" font-size="16" fill="#000" text-anchor="middle">马</text>
                
                <circle cx="110" cy="70" r="15" fill="#f0f0f0" stroke="#000" stroke-width="2"/>
                <text x="110" y="75" font-family="SimHei, Microsoft YaHei" font-size="16" fill="#000" text-anchor="middle">卒</text>
              </svg>
            </div>
            <div class="game-info">
              <h3 class="game-name">中国象棋</h3>
              <p class="game-desc">传统的中国象棋游戏，将帅对决</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'HomeView',
  data() {
    return {
      isConnected: false,
      userId: 'user_' + Math.floor(Math.random() * 10000),
      userName: '',
      isLocalMode: true
    }
  },
  created() {
    this.userName = '玩家' + this.userId.slice(-4);
  },
  methods: {
    // 进入五子棋游戏
    enterWuziqi() {
      console.log('进入五子棋游戏');
      this.$router.push('/wuziqi');
    },
    
    // 进入象棋游戏
    enterChess() {
      console.log('进入象棋游戏');
      this.$router.push('/chess');
    },
    
    // 切换游戏模式
    toggleGameMode() {
      this.isLocalMode = !this.isLocalMode;
    }
  }
}
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.app-header {
  background-color: #333;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-title {
  margin: 0;
  color: #fff;
  text-align: center;
  align-items: center;
  font-size: 24px;
}

.mode-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mode-toggle-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.mode-toggle-btn:hover {
  background-color: #45a049;
}

.current-mode {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-name {
  font-weight: bold;
  font-size: 16px;
}

.user-id {
  font-size: 14px;
  color: #ccc;
}

.connection-status {
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  background-color: #f44336;
}

.connection-status.connected {
  background-color: #4caf50;
}

.app-content {
  flex: 1;
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.game-selection {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.selection-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
}

.game-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.game-card {
  width: 300px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.game-icon {
  height: 180px;
  overflow: hidden;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.game-info {
  padding: 20px;
}

.game-name {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #333;
}

.game-desc {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
</style> 